<template>
	<view>
		<view class="mask" :class="filterShow?'active':''" @click="onFilter"></view>
		<view class="header-search">
			<view class="keyword-search b-white" v-if="search">
				<view v-if="needFilter" class="keyword-search-flex search-where" @click="onFilter">
					<text>
						筛选
					</text>
					<view class="filter-icon-ri mgl5" :class="filterShow?'active':''"></view>
				</view>
				<view class="keyword-search-flex  keyword-search-flex-input">
					<view class="keyword-search-order">
						<input type="text" confirm-type="搜索" class="search-keyword-input" @blur="onSearchBlur" v-model="keyword" @focus="onSearchFocus"
							   @confirm="keywordSearch" />
						<!-- #ifdef H5 -->
						<view class="search-icon fs14 " :class="searchFocus||keyword?'focus':''">
							<text v-if="!keyword" class="mgl5">搜索</text>
						</view>
						<!-- #endif -->

						<!-- #ifdef APP-PLUS -->
						<view class="search-icon fs14 " :class="searchFocus||keyword?'focus':''">
							<icon type="search" size="14" />
							<text v-if="!keyword" class="mgl5">搜索</text>
						</view>
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<view class="search-icon fs14 " :class="searchFocus||keyword?'focus':''">
							<icon type="search" size="14" />
							<text v-if="!keyword" class="mgl5">搜索</text>
						</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view class='tabbar' v-if="statusList">
				<view v-for="(item,key) in statusList" :key="key" class='tabbar-item' @click="handleStatus(item)">
					<view class="" style="position: relative;display: inline-block;">
						<text class='tab-text pb-10' :class="activeStatus==item.status?'item-border':''">{{item.text}}</text>
						<view v-if="item.count&&item.count>0" class="tabbar-number">
							<uni-badge type="error" :text="item.count>=99?'99+':item.count" />
						</view>
					</view>
				</view>
			</view>
			<view class='b-white'>
				<view class='ml-2 mr-2' v-if="ActiveconstomList.length>0">
					<view v-for="(item,key) in constomListHideName" :key="key" class='border-bottom-1 pt-10 pb-10 d-flex justify-between align-center'
						  @click="handleConstomt(item)">
						<text class='tab-text'>{{item.name}}</text>
						<text>{{item.phone||'-'}}</text>
					</view>
				</view>
			</view>
			<view class='tabbar tab-sort' v-if="sortList">
				<view class="tabbar-list">
					<view v-for="(item,key) in sortList" :key="key" class="tabbar-item" @click="handleSort(item)">
						<text class='tab-text pb-10' :class="[false !== item.sortType ? 'need-arrow':'', activeSort.sortField === item.sortField ? `active ${activeSort.sortType}`:'']">
							{{item.text}}
						</text>

					</view>
				</view>
				<view v-if="needTarExtra" class="justify-center align-center" style="display: inline-flex;padding: 0 30upx;">
					<slot name="tabExtra"></slot>
				</view>
			</view>
		</view>

		<view class="str-search-w bgc-w" :class="filterShow?'active':''">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import {uniBadge} from '@dcloudio/uni-ui'
	export default {
		name: 'SearchHead',
		components: {
			uniBadge
		},
		props: {
			/**
			 * 是否显示搜索输入框
			 */
			search: {
				type: Boolean,
				default: true,
			},
			isShowFlooter: {
				type: Boolean,
				default: true,
			},
			/**
			 * 状态列表
			 * 示例：
			 * [
			 {
						text:'未确认',
						status: 0,
						count:0,
					},
			 {
						text:'已调出',
						status: 1,
						count:0,
					},
			 {
						text:'已调入',
						status: 2,
						count:0,
					},
			 ]
			 */
			statusList: {
				type: Array,
				default: null
			},
			constomList: {
				type: Array,
				default: null
			},
			/**
			 * 默认 status 的值
			 */
			status: {
				default: ''
			},
			/**
			 * 排序列表
			 * 示例：
			 * [
			 {
						text:'默认',
						sortField:'DEFAULT',
						sortType: false
					},
			 {
						text:'价格',
						sortField:'price'
					},
			 {
						text:'销量',
						sortField:'DEFAULT'
					},
			 {
						text:'新品',
						sortField:'DEFAULT'
					},
			 ]
			 */
			sortList: {
				type: Array,
				default: null
			},
			sortInit: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				filterShow: false,
				activeStatus: '',
				activeStatusObj: {},
				activeSort: {},
				ActiveconstomList: [],
				ActiveconstomObj: {},
				searchFocus: false,
				keyword: '',
			}
		},
		computed: {
			needFilter() {
				return 'undefined' !== typeof this.$slots.default;
			},
			needTarExtra() {
				return 'undefined' !== typeof this.$slots.tabExtra;
			},
			constomListHideName(){
				let list =[...this.ActiveconstomList];
				// if(list.length>0){
				// 	list.map((item,index)=>{
				// 		let name =item.name
				// 		if(name){
				// 			// item.name =this.hideName(name)
				// 		}
				// 	})
				// }
				return list
			},
		},
		watch: {
			constomList(newValue) {
				// console.log('>>> watch ActiveconstomList', newValue);
				this.ActiveconstomList = newValue
			},
			keyword() {
				if (!this.keyword) {
					this.ActiveconstomList = []
				}
				this.changeFunc()
			},
			status(newValue) {
				// console.log('>>> watch status', newValue)
				this.activeStatus = newValue;
			},
			sortInit(newValue) {
				// console.log('>>> watch sortInit', newValue)
				this.activeSort = newValue;
			},

		},
		created() {
			this.activeStatus = this.status;
			this.activeSort = this.sortInit;
		},
		methods: {
			keywordSearch(e) {
				this.changeFunc();
			},
			handleFilter() {
				this.filterShow = !this.filterShow
			},
			onFilter() {
				this.filterShow = !this.filterShow
			},
			onSearchFocus() {
				this.filterShow = false;
				this.searchFocus = true;
			},
			onSearchBlur() {
				this.searchFocus = false;
				// if(this.keyword){
				// 	this.changeFunc();
				// }

			},
			handleStatus(value) {
				this.activeStatusObj = value;
				this.activeStatus = value.status;
				this.changeFunc();
			},
			handleConstomt(value) {
				// console.log('item,',value)
				this.ActiveconstomObj = value
				this.$emit('constomObj', {
					ActiveconstomObj: this.ActiveconstomObj,
				})
				this.ActiveconstomList = [];
			},
			handleSort(value) {
				// console.log('value', value, this.activeSort);
				const tmpObj = {
					...value
				};

				if (false !== tmpObj.sortType) {

					if (value.sortField === this.activeSort.sortField) {
						switch (this.activeSort.sortType) {
							case 'asc':
								tmpObj.sortType = 'desc';
								break;
							case 'desc':
								tmpObj.sortType = 'asc';
								break;
							default:
								tmpObj.sortType = 'asc';
								break;
						}
					} else {
						tmpObj.sortType = 'asc';
					}
				}
				this.activeSort = tmpObj;
				// console.log('handleSort', this.activeSort)
				this.changeFunc();
			},
			changeFunc() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.$emit('change', {
					value: {
						keyword: this.keyword,
						status: this.activeStatus,
						statusObj: this.activeStatusObj,
						sortObj: this.activeSort,
					},
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../common/common.scss";
	.header-search {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 11;
	}

	.header-search .keyword-search {
		display: flex;
		box-sizing: border-box;
		position: relative;
		border-bottom: 2upx solid #eee;
		border-top: 2upx solid #eee;
		padding: 20upx 30upx;
		/* z-index: 2; */
	}

	.keyword-search .keyword-search-flex {
		flex-direction: row;
	}

	.option-icon {
		font-size: 14upx;
		margin-top: 3upx;
		margin-left: 1upx;
	}

	.keyword-search-flex-input {
		flex: 1;
		box-sizing: border-box;
	}

	.keyword-search-order {
		width: 100%;
		background-color: #F8F8F8;
		box-sizing: border-box;
		border-radius: 40upx;
		/* text-align: center; */
		/* padding: 30upx 0; */
		position: relative;
	}

	.search-keyword-input {
		padding: 8upx 0 8upx 60upx;
		border: 0;
		margin: 0;
		/* #ifdef APP-PLUS */
		font-size: 36upx;
		/* #endif */
	}

	.search-icon {
		position: absolute;
		color: #999;
		height: 50upx;
		top: 12upx;
		left: 50%;
		margin-left: -47upx;
		transition: all 0.3s;
	}

	.search-icon.focus {
		left: 20upx;
		margin-left: 0;
	}

	.tabbar {
		width: 100%;
		height: 110upx;
		z-index: 99;
		background: #fff;
		box-sizing: border-box;
		padding: 30upx 0upx 30upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1px solid $border-color;

		.tabbar-list {
			flex: 1;
			display: flex;

		}

		.tabbar-item {
			flex: 1;
			text-align: center;
			position: relative;

			.tabbar-number {
				position: absolute;
				right: -40rpx;
				top: -32rpx;
			}
		}

		&.tab-sort {
			padding: 0;
			height: 90upx;
			justify-content: space-between;
		}
	}

	.tabbar-item {
		padding: 0 32upx;

		.need-arrow {
			position: relative;

			&::before,
			&::after {
				position: absolute;
				right: -20upx;
				content: ' ';
				width: 0;
				height: 0;
				background-color: transparent;
				border: 8upx solid transparent;
			}

			&::before {
				border-bottom-color: #666666;
				top: -2upx;
			}

			&::after {
				border-top-color: #666666;
				bottom: 6upx;
			}

			&.asc::before {
				border-bottom-color: $uni-color-primary;
			}

			&.desc::after {
				border-top-color: $uni-color-primary;
			}
		}
	}

	.tab-text {
		/* #ifdef APP-PLUS */
		font-size: 36upx;
		/* #endif */
		/* #ifndef APP-PLUS */
		font-size: 32upx;
		/* #endif */
		color: #4A4A4A;
		text-align: center;
		transition: all 0.16s;

		&.active {
			font-weight: bold;
			color: $uni-color-primary;
		}
	}

	.item-border {
		/* #ifdef APP-PLUS */
		font-size: 36upx !important;
		/* #endif */
		/* #ifndef APP-PLUS */
		font-size: 32upx !important;
		/* #endif */
		font-weight: bold;
		color: #4A4A4A !important;
		text-align: center;
		line-height: 32upx;
		border-bottom: 6upx #4275AA solid;
	}

	.mask {
		position: fixed;
		z-index: 20;
		left: 0;
		top: 120.5upx;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .3);
		display: none;
	}

	.mask.active {
		display: block;
	}

	.str-search-w {
		position: fixed;
		left: 0;
		top: 120.5upx;
		right: 0;
		z-index: 99;
		display: none;
	}

	.str-search-w.active {
		display: block;
	}

	.w-item {
		border-bottom: 2upx solid #eee;
		padding: 20upx 30upx;
	}

	.w-item:active {
		background: rgba(0, 0, 0, .2);
	}

	.keyword-search-flex.search-where {
		width: 16%;
		text-align: center;
		color: #979797;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.filter-icon-ri {
		width: 0upx;
		height: 0upx;
		border: 10upx solid #999999;
		border-left-color: transparent;
		border-right-color: transparent;
		border-bottom: 0;
		background-color: transparent;
	}

	.filter-icon-ri.active {
		transform: scale(1, -1);
		margin-top: -2upx;
	}
</style>
